<template>
  <section class="ProjectIndex-container">
    <project-search ref="search" @onSearch="doSearch">
      <project-list :projects="projects">
        <template slot="action-bar">
          <quick-action-bar>
            <quick-icon-button
              icon="icon-icon_xinzeng"
              tooltip="新增"
              @click="showAddDialog"
            />
          </quick-action-bar>
        </template>
        <template slot="row-action-bar" slot-scope="scope">
          <quick-action-bar>
            <quick-action-bar>
              <quick-icon-button
                icon="icon-xiugai"
                tooltip="编辑"
                @click="showEditDialog(scope.row)"
              />
              <quick-icon-button
                icon="icon-shanchu"
                tooltip="删除"
                @click="deleteProject(scope.row.id)"
              />
              <quick-icon-button
                icon="icon-24gl-pause"
                tooltip="暂停"
                @click="showPauseProjectDialog(scope.row)"
              />
              <quick-icon-button
                icon="icon-kaishi"
                tooltip="开始"
                @click="showBeginProjectDialog(scope.row)"
              />
            </quick-action-bar>
          </quick-action-bar>
        </template>
        <template slot="row-member" slot-scope="scope">
          <quick-action-bar>
            <quick-icon-button
              icon="icon-zhanghao"
              tooltip="成员"
              @click="showMemberDialog(scope.row)"
            />
          </quick-action-bar>
        </template>
      </project-list>
    </project-search>

    <project-add ref="addDialog" @added="refresh" />
    <project-edit ref="editDialog" @edited="refresh" />
    <project-member ref="memberEditDialog" />
    <project-pause ref="pauseDialog" @paused="refresh" />
    <project-begin ref="beginDialog" />
  </section>
</template>

<script>
import ProjectSearch from "./ProjectSearch.vue";
import ProjectList from "./ProjectList.vue";
import ProjectAdd from "./ProjectAdd.vue";
import ProjectEdit from "./ProjectEdit.vue";
import ProjectPause from "./ProjectPause.vue";
import ProjectBegin from "./ProjectBegin.vue";
import ProjectMember from "./ProjectMember.vue";
import _api from "@/common/api/project";

export default {
  components: {
    ProjectSearch,
    ProjectList,
    ProjectAdd,
    ProjectEdit,
    ProjectPause,
    ProjectBegin,
    ProjectMember,
  },

  data() {
    return {
      projects: [],
    };
  },

  methods: {
    doSearch(projects) {
      this.projects = projects;
    },

    showAddDialog() {
      this.$refs.addDialog.showDialog();
    },

    showEditDialog(project) {
      this.$refs.editDialog.showDialog(project);
    },

    deleteProject(id) {
      this.$confirm("你确定删除此项吗？", "确认删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await _api.deleteAsync(id);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.refresh();
          } catch (error) {
            this.$message({
              type: "info",
              message: `删除失败，${error}`,
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    showPauseDialog(project) {
      this.$refs.pauseDialog.showDialog(project);
    },

    showMemberDialog(project) {
      this.$refs.memberEditDialog.showDialog(project);
    },

    showBeginProjectDialog(project) {
      this.$refs.beginDialog.showDialog(project);
    },

    refresh() {
      this.$refs.search.getProjects();
    },
  },

  mounted() {},
};
</script>

<style scoped lang="scss">
.ProjectIndex-container {
  height: 100%;
}
</style>